<template>
	<view class="container">
		<view class="lines"></view>
		<view class="conter">
			<view class="c-1">
				<view class="c-2">请将转运箱标签靠近手机</view>
				<view class="c-3">
					<view>请将转运标签置于手机顶部，NFC功能开启智能识别。</view>
					<view style="margin-top: 10rpx;">手机与转运箱标签无缝对接，轻松搞定信息读取。</view>
				</view>
			</view>
			<view class="c-4">
				<image class="im-4" src="/static/work/04.png"></image>
				<view class="dot"></view>
			</view>
		</view>
		<u-popup :show="show" round="20rpx" @close="close" @open="open" mode="bottom">
			<view class="po-1">
				<view class="po-2">已准备好扫描</view>
				<view class="po-3">把你的设备放在一个转运筐标签附近读信息</view>
				<view class="po-4">
					<image class="impo-5" src="/static/work/04.png" mode=""></image>
					<view class="dots"></view>
				</view>
				<view class="po-5">
					<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">完成扫描</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NFC from './NFC.js'
	export default {
		data() {
			return {
				loading:false,
				customStyleBtn1: {
					width: '630rpx',
					height: '74rpx',
					borderRadius: '37rpx',
					background: "#177A77",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				show: false,
				type: '',
				NfcCodes: [], //存储nfcID
			}
		},
		onLoad(option) {
			// 获取选项是 L还是G
			this.type = option.type
		},
		onShow() {
			// 初始化
			NFC.listenNFCStatus()
			// 延迟1秒开始读取
			this.getRead()
			// event 事件
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('nfcCodds', this.handleCustomEventBind);
		},
		methods: {
			getRead(){
				NFC.readData();
			},
			// 完成扫描
			submit(){
				if(this.NfcCodes.length>0){
					uni.navigateTo({
						url:'/pages/work/common/nfcData?NfcCodes='+JSON.stringify(this.NfcCodes)+'&type='+this.type
					})
				}else{
					uni.showToast({
						title:'暂无数据',
						icon:'none'
					})
				}
				
				this.show = false
			},
			// 获取nfc数据
			handleCustomEvent(event) {
				console.log('获取到的数据:',event.data);
				if (!this.NfcCodes.includes(event.data)) {
					setTimeout(()=>{
						this.getRead()
					},500)
					uni.showToast({
						title:'录入成功',
						icon:'none'
					})
					this.NfcCodes.push(event.data)
					if(this.NfcCodes.length>0){
						this.show = true
					}
				}
			}
		},
		onUnload() {
			// uni.$off('nfcCodds')
		}
	}
</script>

<style scoped>
	.impo-5{
		width: 78rpx;
		height: 69rpx;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.po-5{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 67rpx;
	}
	.po-4{
		width: 317rpx;
		height: 317rpx;
		/* background-color: #177A77; */
		margin-top: 68rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.po-3{
		font-size: 24rpx;
		color: #666666;
		margin-top: 32rpx;
	}
	.po-2{
		font-size: 36rpx;
		font-weight: bold;
		color: #222222 ;
	}
	.po-1{
		width: 100%;
		height: 855rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 84rpx 0 0 0 ;
		box-sizing: border-box;
	}
	.im-4 {
		width: 116rpx;
		height: 103rpx;
		position: relative;
		top: 0%;
		left: 0%;
		z-index: 2;
	}
	.dots {
		width: 40px;
		height: 40px;
		display: block;
		position: absolute;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 0rpx;
		margin-right: 0rpx;
		z-index: 1;
	}
	
	.dots::after {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		background-color: #177A77;
		animation: dot-play 4s linear 400ms infinite;
	}
	
	.dots::before {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #DDECEB;
		animation: dot-play 4s linear 200ms infinite;
		animation-delay: 2s;
		/* 延迟 2s */
	}
	
	@keyframes dots-play {
		from {
			transform: scale(1);
			opacity: .2;
		}
	
		to {
			transform: scale(4);
			opacity: 0;
		}
	}
	.dot {
		width: 70px;
		height: 70px;
		display: block;
		position: absolute;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 0rpx;
		margin-right: 0rpx;
		z-index: 1;
	}

	.dot::after {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		background-color: #177A77;
		animation: dot-play 4s linear 400ms infinite;
	}

	.dot::before {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #DDECEB;
		animation: dot-play 4s linear 200ms infinite;
		animation-delay: 2s;
		/* 延迟 2s */
	}

	@keyframes dot-play {
		from {
			transform: scale(1);
			opacity: .2;
		}

		to {
			transform: scale(4);
			opacity: 0;
		}
	}

	.c-4 {
		width: 470rpx;
		height: 470rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 88rpx;
	}

	.c-3 {
		font-size: 26rpx;
		color: #999999;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.c-2 {
		font-size: 42rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 55rpx;
	}

	.c-1 {
		width: 650rpx;
		min-height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 180rpx;
	}

	.conter {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lines {
		width: 100%;
		height: 20rpx;
		background-color: #F9F9F9;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
	}
</style>